<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<!--定义好页面编码 -->
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--描述：这里定义好移动端的自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 模板</title>
    <!-- 引入好Bootstrap css样式文件 -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--描述：引入js文件 记住一定要先引入JQuery的支持-->
    <script src="js/jquery-1.12.4.js"></script>
    <!-- 引入bootStrap的js文件-->
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
    		$(function(){
    			// 先增加滚动监听
    			$("#mycontent").scrollspy({
								offset:10,
								spy:scroll
						});
					// 删除导航元素
    			$("#second,#third").remove();
    			// 刷新元素
    			$("#mycontent").each(function () {
  							var $spy = $(this).scrollspy('refresh')
					});
    		});
    </script>
  </head>
  <body>
  	<!-- 这里写代码-->
		<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="mynav ">
							<nav class="navbar navbar-default" id="mynavbar">
								<div class="navbar-header">
										<a href="#" class="navbar-brand">YAHOO</a>
								</div>
								<ul class="nav navbar-nav ">
									<li class="active"><a href="#first" style="font-size: 15px;">第一章</a></li>
									<li><a href="#second" style="font-size: 15px;">第二章</a></li>
									<li><a href="#third" style="font-size: 15px;">第三章</a></li>
									<li><a href="#fourth" style="font-size: 15px;">第四章</a></li>
									<li><a href="#fifth" style="font-size: 15px;">第五章</a></li>
								</ul>
							</nav>
							<!-- 正文部分-->
							<div style="height:200px;overflow:auto" data-target="#mynav" id="mycontent">
									<h3 id="first">第一章内容</h3>
									<p>
										Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, 
										velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. 
										Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
									</p>
								  <h3 id="second"> 第二章内容</h3>
									<p>
										In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, 
										proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. 
										Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. 
										Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
									</p>
									<h3 id="third">第三章内容</h3>
									<p>
										Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, 
										velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. 
										Vero VHS est adipisicing. 
										Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
									</p>
									<h3 id="fourth">第四章内容</h3>
									<p>
										Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, 
										velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. 
										Vero VHS est adipisicing. 
										Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
									</p>
									<h3 id="fifth">第五章内容</h3>
									<p>
										Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, 
										velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. 
										Vero VHS est adipisicing. 
										Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
									</p>
						</div>
					</div>
					</div>
				</div>
		</div>
  </body>
</html>